<!-- 相当于给模板定义一个名字 define end 成对出现 -->
 {{ define "frontdesk/index.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天猫商城</title>
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="shortcut icon" href="/static/images/tianmao.jpg" type="image/x-icon">

    <style>
        .all{
            margin: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            .top-part{
                display: flex;
                justify-content: flex-start;
                .classify{
                    color: chocolate;
                    font-size: 16px;
                    font-weight: bold;
                    padding: 10px;
                }
                .front-bar{
                    margin-right: 20px;
                    cursor: pointer;
                    padding: 10px;
                    background-color: aliceblue;
                }
                .sel-bar {
                    color: rgb(210, 56, 153);
                }
                .unsel-bar {
                    color: cornflowerblue;
                }
                .shop-card{
                    margin-left: 80px;
                    /* cursor: pointer; */
                    padding: 10px;
                    background-color: aliceblue;
                    color: rgb(22, 120, 45);
                }
            }
            .bot-part{
                margin-top: 10px;
                .bot-cont{
                    /* display: flex;
                    justify-content: flex-start; */
                    display: grid;
                    grid-template-columns: repeat(5,1fr);
                    gap: 10px;
                    .it-div{
                        padding: 20px;
                        background-color: rgb(242, 233, 222);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .img{
                            width: 120px;
                            height: 120px;
                            margin-bottom: 10px;
                        }
                        .it-btns{
                            margin-top: 10px;
                            .btn{
                                font-size: 14px;
                                padding: 5px;
                                border-radius: 10px;
                                background-color: rgb(40, 142, 40);
                                color: white;
                            }
                            .point-ck{
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }
    </style>
</head>
<body>
    {{template "public/page_header.html" .}}
    
    <div class="all">
        <div>
            <div class="top-part">
                <div class="classify">分类：</div>
                <div {{if eq .barKey -1}} class="front-bar sel-bar" {{else}} class="front-bar unsel-bar" {{end}} onclick="clickTab(-1)">全部</div>
                <div {{if eq .barKey 1}} class="front-bar sel-bar" {{else}} class="front-bar unsel-bar" {{end}} onclick="clickTab(1)">水果</div>
                <div {{if eq .barKey 2}} class="front-bar sel-bar" {{else}} class="front-bar unsel-bar" {{end}} onclick="clickTab(2)">鲜花</div>
                <div {{if eq .barKey 3}} class="front-bar sel-bar" {{else}} class="front-bar unsel-bar" {{end}} onclick="clickTab(3)">蔬菜</div>
                <div {{if eq .barKey 4}} class="front-bar sel-bar" {{else}} class="front-bar unsel-bar" {{end}} onclick="clickTab(4)">休闲零食</div>
                <div {{if eq .barKey 5}} class="front-bar sel-bar" {{else}} class="front-bar unsel-bar" {{end}} onclick="clickTab(5)">酒水饮料</div>
                <div class="shop-card" onclick="shopCard()">购物车</div>
            </div>
            <div class="bot-part">
                <div class="bot-cont">
                    {{range $key,$value:=.info}}
                        <div class="it-div">
                            <div>
                                {{if ne $value.ImgPath ""}}
                                    <img class="img" src="/static/upload/goods/{{$value.ImgPath}}" alt="">
                                {{end}}
                                <div><span>名称：</span>{{$value.Title}}</div>
                                <div>
                                    <span>类别：</span>
                                    {{if eq $value.Category 1}}
                                        水果
                                    {{else if eq $value.Category 2}}
                                        鲜花
                                    {{else if eq $value.Category 3}}
                                        蔬菜
                                    {{else if eq $value.Category 4}}
                                        休闲零食
                                    {{else}}
                                        酒水饮料
                                    {{end}}
                                </div>
                                <div><span>单价：￥</span>{{$value.Price}}</div>
                                <div class="it-btns">
                                    <span class="btn" onclick="addCard()">加入购物车</span>
                                    <span class="btn point-ck" onclick="detailFun({{$value.Id}})">详情</span>
                                </div>
                            </div>
                        </div>
                    {{else}}
                        <div></div>
                    {{end}}
                </div>
                <div>

                </div>
            </div>
        </div>
    </div>

    <br>
    {{template "public/page_footer.html" .}}

    <script>
        function clickTab(key) {
            location.href="/front/index?bar="+key;
        }
        function shopCard(){
            // location.href="/back/welcome";
        }
        function detailFun(id){
            location.href="/front/detail?id="+id;
        }
        function addCard(){
            
        }
    </script>
</body>
</html>
{{ end }}